import CPXHTYPE from "@/type/cpxh"
import { Button, Input, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@nextui-org/react"
import { useState } from "react"

const CpxhDialog = ({ putCpxh, isOpen, onOpenChange, onClose }: { putCpxh: (cpxh: CPXHTYPE) => void, isOpen: boolean, onOpenChange: () => void, onClose: () => void }) => {

    const [cpxh, setCpxh] = useState("")

    return (
        <>
            <Modal
                isDismissable={false}
                isKeyboardDismissDisabled={true}
                isOpen={isOpen}
                placement="center"
                size="sm"
                onOpenChange={onOpenChange}
            >
                <ModalContent>
                    <ModalHeader className="flex flex-col gap-1">产品型号</ModalHeader>
                    <ModalBody>
                        <Input value={cpxh} onValueChange={(v) => setCpxh(v.toUpperCase())} label="产品型号" variant="underlined" />
                    </ModalBody>
                    <ModalFooter>
                        <Button color="danger" size="sm" variant="light" onPress={onClose}>
                            关闭
                        </Button>
                        <Button color="primary" size="sm" onPress={() => {
                            if (cpxh != "" && cpxh != undefined) {
                                putCpxh({ key: cpxh.toLowerCase(), label: cpxh.toUpperCase(), id: 0 })
                                setCpxh("")
                            }
                        }}>
                            添加
                        </Button>
                    </ModalFooter>
                </ModalContent>
            </Modal>
        </>
    )
}

export default CpxhDialog